import styled from "styled-components";

export const ArtistSongWrap = styled.div`
  ul {
    li {
      display: flex;
      height: 30px;
      align-items: center;
      :nth-child(2n-1) {
        background-color: #f7f7f7;
      }
      .index-play {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 94px;
        padding: 0 10px;
        color: #999;
      }
      .artist-title-video {
        display: flex;
        align-items: center;
        flex: 1;
        .artist-title-name {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          max-width: 258px;
        }
        span {
          color: #aeaeae;
        }
      }
      .hotSong-time {
        width: 100px;
        padding: 0 10px;
      }
      .hotSong-name {
        width: 148px;
        padding: 0 10px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      :hover {
        .hotSong-time {
          .h-dt {
            display: none;
          }
          .fourBox .tr-time-box {
            display: block;
          }
        }
      }
    }
    .noplay {
      color: #bbb;
      a {
        color: #bbb;
      }
      .play-btn {
        opacity: 0.5;
        :hover {
          background-position: 0 -103px;
        }
      }
    }
  }
`;
